<template>
  <div
    :data-name="dataName"
    :style="{
      width,
      height: width,
      backGroundColor,
      fontSize: fontSizeShow,
      color,
    }"
    ref="currentDom"
    class="test-avator"
  ></div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
const propsVal = defineProps({
  size: {
    type: [String, Number],
    default: 32,
  },
  fontSize: {
    type: [String, Number],
    default: null,
  },
  content: {
    type: String,
    default: "未知",
  },
  backGroundColor: {
    type: String,
    default: null,
  },
  color: {
    type: String,
    default: null,
  },
});
const fontSizeDefault = ref(32);
const currentDom = ref(null);
const width = computed(() => {
  return Number.isNaN(Number(propsVal.size))
    ? propsVal.size
    : propsVal.size + 'px';
});

const dataName = computed(() => {
  return String(propsVal.content)
    .slice(propsVal.content.length - 2)
    .toUpperCase();
});
const fontSizeShow = computed(() => {
  let fontSize = 16;
  if (fontSizeDefault.value) {
    fontSize = fontSizeDefault.value / 3;
  }
  const propFontSize = parseInt(propsVal.fontSize);
  return (Number.isNaN(propFontSize) ? fontSize : propFontSize) + 'px';
});
</script>

<style lang="scss" scoped>
.test-avator {
  position: relative;
  border-radius: 50%;
  background-color: $color-main-bg;
  font-size: 16px;
  color: #ffffff;
  &::before {
    content: attr(data-name);
    text-align: center;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
